<template>
  <el-form :model="vendorUpdateForm" :rules="rules" ref="vendorUpdateForm" label-width="140px"
           class="update-vendor-form">
    <el-form-item label="公司名称" prop="vendorName">
      <el-input v-model="vendorUpdateForm.vendorName"></el-input>
    </el-form-item>
    <el-form-item label="法人" prop="legalPerson">
      <el-input v-model="vendorUpdateForm.legalPerson"></el-input>
    </el-form-item>
    <el-form-item label="税务登记号" prop="taxationAffairsRegistration">
      <el-input v-model="vendorUpdateForm.taxationAffairsRegistration"></el-input>
    </el-form-item>
    <el-form-item label="注册资金" prop="registeredCapital">
      <el-input v-model="vendorUpdateForm.registeredCapital"></el-input>
    </el-form-item>
    <el-form-item label="注册地址" prop="registeredAddress">
      <v-distpicker :province="selectVendorAddress.province" :city="selectVendorAddress.city"
                    :area="selectVendorAddress.area"></v-distpicker>
      <el-input class="addressInput" v-model="vendorUpdateForm.registeredAddress"></el-input>
    </el-form-item>
    <el-form-item label="通讯地址" prop="address">
      <v-distpicker :province="selectVendorAddress.province" :city="selectVendorAddress.city"
                    :area="selectVendorAddress.area"></v-distpicker>
      <el-input class="addressInput" v-model="vendorUpdateForm.address"></el-input>
    </el-form-item>
    <el-form-item label="官网" prop="site">
      <el-input v-model="vendorUpdateForm.site"></el-input>
    </el-form-item>
    <el-form-item label="备注" prop="comment">
      <el-input v-model="vendorUpdateForm.comment"></el-input>
    </el-form-item>
    <el-form-item label="联系人" prop="contactName">
      <el-input v-model="vendorUpdateForm.contactName"></el-input>
    </el-form-item>
    <el-form-item label="联系方式" prop="contact">
      <el-input v-model="vendorUpdateForm.contact"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="vendorUpdateForm.phone"></el-input>
    </el-form-item>
    <el-form-item label="传真" prop="fax">
      <el-input v-model="vendorUpdateForm.fax"></el-input>
    </el-form-item>
    <el-form-item label="email" prop="email">
      <el-input v-model="vendorUpdateForm.email" type="email"></el-input>
    </el-form-item>
    <!--<el-form-item label="合同编号" prop="contractNo">-->
    <!--<el-input v-model="vendorUpdateForm.contractNo" type="email"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="入驻时间" prop="contractNo">-->
    <!--<el-date-picker-->
    <!--v-model="vendorUpdateForm.registerTime"-->
    <!--type="datetime"-->
    <!--placeholder="选择日期时间"-->
    <!--align="right">-->
    <!--</el-date-picker>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="账户管理费类型" prop="managementCostType">-->
    <!--<el-input v-model="vendorUpdateForm.managementCostType" type="email"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="账户管理费金额" prop="managementCost">-->
    <!--<el-input v-model="vendorUpdateForm.managementCost"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="账户管理费金额比例" prop="managementCostScale">-->
    <!--<el-input v-model="vendorUpdateForm.managementCostScale"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="银行" prop="bank">-->
    <!--<el-input v-model="vendorUpdateForm.bank"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="银行账号" prop="account">-->
    <!--<el-input v-model="vendorUpdateForm.account"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="账号类型" prop="registerTime">-->
    <!--<el-radio-group v-model="vendorUpdateForm.accountType">-->
    <!--<el-radio :label="0">公司</el-radio>-->
    <!--<el-radio :label="1">个人</el-radio>-->
    <!--</el-radio-group>-->
    <!--</el-form-item>-->
    <el-form-item>
      <el-button type="primary" @click="submitForm('vendorUpdateForm')">修改</el-button>
      <el-button @click="resetForm('vendorUpdateForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import VDistpicker from 'v-distpicker'
  import axios from 'axios'
  export default {
    components: {
      VDistpicker
    },
    data () {
      return {
        vendorId: this.$route.params.id,
        selectRegisteredAddress: {province: '北京市', city: '北京市', area: '朝阳区'},
        selectVendorAddress: {province: '北京市', city: '北京市', area: '朝阳区'},
        vendorUpdateForm: {
          id: '',
          vendorName: '',
          legalPerson: '',
          registeredCapital: '无',
          registeredAddress: '无',
          taxationAffairsRegistration: '',
          address: '',
          site: '',
          comment: '',
          contact: 1,
          phone: '',
          fax: '',
          email: '',
          contractNo: '',
          managementCostType: '',
          managementCost: '0.0000',
          managementCostScale: 100.0000,
          bank: '',
          account: '',
          registerTime: '',
          accountType: 0
        },
        rules: {
          vendorName: [
            {required: true, message: '请输入公司名称', trigger: 'blur'}
          ],
          legalPerson: [
            {required: true, message: '请输入法人', trigger: 'change'}
          ],
          registeredCapital: [
            {required: false, message: '请输入注册资金', trigger: 'change'},
            {max: 8, message: '仅数字8位以内，不支持特殊字符', trigger: 'blur'}
          ],
          taxNumber: [
            {required: false, message: '请输入税务登记号', trigger: 'change'},
            {max: 50, message: '仅数字50位以内，不支持特殊字符', trigger: 'blur', type: 'number'}
          ],
          address: [
            {required: false, message: '请输入注册地址', trigger: 'change'}
          ],
          phone: [
            {required: true, message: '请输入您的电话号码', trigger: 'change', validator: this.phoneNumberCheck}
          ],
          accountType: [
            {required: true, message: '选择公司类型', trigger: 'blur'}
          ]
        }
      }
    },
    mounted () {
      axios.post('/api/vendor/getDetail', {vendorId: this.$route.params.id}).then((res) => {
        let vendor = res.data.data
        this.vendorUpdateForm.id = this.$route.params.id
        this.vendorUpdateForm.vendorName = vendor.vendorName
        this.vendorUpdateForm.legalPerson = vendor.legalPerson
        this.vendorUpdateForm.registeredCapital = vendor.registeredCapital || 10 + '万元'
        this.vendorUpdateForm.registeredAddress = vendor.registeredAddress
        this.vendorUpdateForm.taxationAffairsRegistration = vendor.taxationAffairsRegistration
        this.vendorUpdateForm.address = vendor.address
        this.vendorUpdateForm.site = vendor.site
        this.vendorUpdateForm.comment = vendor.comment
        this.vendorUpdateForm.contact = vendor.contact
        this.vendorUpdateForm.phone = vendor.phone
        this.vendorUpdateForm.fax = vendor.fax
        this.vendorUpdateForm.email = vendor.email
        this.vendorUpdateForm.contractNo = vendor.contractNo
        this.vendorUpdateForm.managementCostType = vendor.managementCostType
        this.vendorUpdateForm.managementCost = vendor.managementCost
        this.vendorUpdateForm.managementCostScale = vendor.managementCostScale
        this.vendorUpdateForm.bank = vendor.bank
        this.vendorUpdateForm.account = vendor.account
        this.vendorUpdateForm.registerTime = vendor.registerTime
        this.vendorUpdateForm.accountType = vendor.accountType
      })
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.vendorUpdateForm.registeredAddress = this.selectRegisteredAddress.province + '-' +
              this.selectRegisteredAddress.city + '-' +
              this.selectRegisteredAddress.area + '-' +
              this.vendorUpdateForm.registeredAddress
            this.vendorUpdateForm.address = this.selectVendorAddress.province + '-' +
              this.selectVendorAddress.city + '-' +
              this.selectVendorAddress.area + '-' +
              this.vendorUpdateForm.address
            axios.post('/api/vendor/updateVendor', this.vendorUpdateForm).then((res) => {
              if (res.data.code === 9999) {
                this.$notify({
                  title: '更新成功！',
                  message: this.$createElement('i', {style: 'color: green'}, res.data.msg.context)
                })
                axios.post('/api/vendor/getDetail', {vendorId: this.vendorUpdateForm.id}).then((res) => {
                  this.fullScreenLoading = false
                  switch (res.data.code) {
                    case 9999:
                      (() => {
                        this.$router.push('/get-detail/' + this.vendorId)
                      })()
                      break
                    case 6000:
                      (() => {
                        console.log('csErr')
                      })()
                  }
                })
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      phoneNumberCheck (rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入电话号码'))
        } else if (!(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(value))) {
          callback(new Error('请输入正确的格式!'))
        } else {
          callback()
        }
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  .update-vendor-form {
    width: 800px;
    margin: 10px 0 0 0 ;
  }

  .address {
    display: inline-flex;
    justify-content: space-around;
  }

  .addressInput {
    width: 500px;
    margin:20px 0;
  }
</style>
